<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card>
        <!-- 标题 -->
        <!-- el-row 被分成了 24份 -->
        <tree-tools
          :data="companyInfo"
          :is-root="false"
          style="border-bottom: 1px solid #ccc; padding: 15px 0;"
          @showDialog="showDialog"
        />
        <!-- 部门列表
          data 是tree组件的数据属性, 值是数组包对象  label是展示的文本, children是子节点(也是数组包对象)
          props 配置属性 配置展示文本节点属性和 父子依赖关系属性
        -->
        <el-tree :data="list" :props="propsObj" default-expand-all>
          <!-- data 是组件内部作用域插携带的数据 表示的是每一行的数据 -->
          <template #default="{ data }">
            <!-- {{ data }} -->
            <tree-tools
              :data="data"
              @reload="getDepts"
              @showDialog="showDialog"
              @showEditDialog="showEditDialog"
            />
          </template>
        </el-tree>
        <!-- 对话框组件 -->
        <add-depts
          :id="id"
          ref="addDeptRef"
          :dialog-visible="dialogVisible"
          :source-depts="sourceDepts"
          @closeDialog="dialogVisible = false"
          @reload="reload"
        />
      </el-card>
    </div>
  </div>
</template>
<script>
import { reqGetDepartments } from '@/api/departments'
import treeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils/index'
import AddDepts from './components/add-depts.vue'
export default {
  name: 'Departments',
  components: { treeTools, AddDepts },
  data() {
    return {
      list: [],
      propsObj: {
        label: 'name', // 展示的字段是name
        children: 'children' // 父子依赖关系属性 child
      },
      dialogVisible: false, // 控制对话框显示与隐藏的属性
      sourceDepts: [], // 原始的部门列表数据
      id: '', // 点击添加存储的部门id
      companyInfo: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' }
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    // 获取部门列表的方法
    async getDepts() {
      //  获取的部门列表不是树形组件需要的数据格式， 需要单独处理
      // 所有的一级部门pid是'', 二级部门的pid是一级部门的id
      const { data } = await reqGetDepartments()
      this.list = tranListToTreeData(data.depts, '')
      this.sourceDepts = data.depts // 存储一份原始的部门列表数据
    },
    // 点击添加展示对话框并接收传递的部门id
    showDialog(id) {
      this.$refs.addDeptRef.title = '添加部门'
      this.dialogVisible = true
      this.id = id
    },
    // 确定提交完成, 子组件通知父组件关闭对话框并重新获取部门列表
    reload() {
      this.dialogVisible = false
      this.getDepts()
    },
    // 点击编辑显示对话框
    showEditDialog(data) { // data点击的部门所有信息
      this.$refs.addDeptRef.title = '编辑部门'
      // console.log(data)
      // this.$refs.addDeptRef.showDeptInfo(data) 这种直接复制回显的操作不推荐, 数据有可能不是最新的
      this.$refs.addDeptRef.showDeptInfo(data.id) // 将点击的部门信息给到子组件,让子组件拿着这个id去获取部门信息
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown{
  .el-dropdown-link{
    font-size: 16px;
    color: #303133;
  }
}
// 直接覆盖树形样式即可
::v-deep .el-tree {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/sub.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/man.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

}
// 深度选择器
// 作用某些类名, 但是样式作用不上, 原因是这个类名压根就不在组件中, 组件内部
// 这时候就得使用深度选择器来将这个样式 穿透到组件内部
// scss ::v-deep
// less /deep/
// css >>>
::v-deep .el-tree-node__content {
 height: 40px !important;
}

// {id: '6051ad90e93db6522c1d00d2', pid: '', name: '技术部' }
// '6051ad90e93db6522c1d00d2' 以技术部的id为查询条件 找技术部的子部门
// 查询到java研发部的pid是 '6051ad90e93db6522c1d00d2' 拿到这一项的id 当做查询条件, 查找java研发部的子部门
// 以6051adb6e93db6522c1d00d3 为查询条件查找它的子部门 最终没有部门的pid是6051adb6e93db6522c1d00d3 得到[]
</style>
